@cardColor: rgb(16,32,52);

body{
    width: 3840px;
    height: 1200px;
    background-image: url(../images/beijing.png);
    margin: 0;
}

.head{
    width: 3840px;
    height: 100px;
    background-color: aliceblue;
}

.body{
    width: 3840px;
    height: 1060px;
    display: flex;
    justify-content: space-evenly;
    .layout{
        width: 32%;
        height: 1060px;
    }
    .left{
        .layout;
    }
    .center{
        .layout;
    }
    .right{
        .layout;
    }
}

.title{
    display: flex;
    align-items: flex-end;
    margin-bottom: 15px;
    .title-text{
        font-size: 25px;
        line-height: 25px;
        background-image:-webkit-linear-gradient(bottom,rgb(232,137,28),rgb(255,244,154));
        background-clip: text;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        margin-right: 5px;
    }
    .title-line{
        height: 1px;
        width: 100%;
        background-color: rgb(232,137,28);
        margin-left: -10px;
    }
}

.title1{
    height: 25px;
    width: 100%;
    display: flex;
    align-items: center;
    .title1-tag{
        width: 4px;
        height: 15px;
        border-radius:20%;
        background-color: rgb(31,255,255);
        margin-left: 15px;
        margin-right: 10px;
    }
    .title1-text{
        font-size: 18px;
        line-height: 25px;
        color: #fff;
    }
}

.security-incident-infor{
    height: 33.3%;
    .card{
        width: 100%;
        height: 82%;
        background-color: @cardColor;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .card-left{
            width: 49%;
            height: 100%;
            .charts{
                margin: 0 auto;
                width: 500px;
                height:262px;
                background-image: url(../images/charts1.png);
                background-position: 137px 19px;
                background-repeat: no-repeat;
            }
        }
        .card-right{
            width: 49%;
            height: 100%;
            .charts{
                margin: 0 auto;
                width: 520px;
                height:262px;
            }
        }
    }
}

.work-order-statistics{
    height: 33.3%;
    .card{
        width: 100%;
        height: 82%;
        background-color: @cardColor;
        .charts{
            margin: 0 auto;
            width: 1150px;
            height:300px;
        }
    }
}

.workloadTop-knowledgeTop{
    height: 33.3%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .workload-top {
        height: 100%;
        width: 48%;
        .charts{
            background-color: @cardColor;
            margin: 0 auto;
            width: 600px;
            height:320px;
        }
    }
    .knowledge-top{
        .workload-top
    }
}

.system-infor{
    height: 42%;
    width: 100%;
    .card{
        width: 100%;
        height: 87%;
        background-color: @cardColor;
        .card-top {
            height: 103px;
            width: 100%;
            display: flex;
            justify-content: space-around;
            padding-top: 15px;
            .card-top-left{
                width: 28%;
                background-image: url(../images/system-infor-left.png);
                .card-top-left-title{
                    margin-left: 73px;
                    color: #d6ffff;
                    line-height: 9px;
                    font-size: 18px;
                }
                .card-top-left-body{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    .text1{
                        width: 50%;
                        height: 47px;
                        line-height: 53px;
                        text-align: center;
                        font-size: 14px;
                        color: RGBA(208, 248, 249, 1);
                    }
                    .text2{
                        .text1
                    }
                    .text3{
                        .text1;
                        line-height: 28px;
                        font-size: 28px;
                        font-weight: 100;
                        color: RGBA(1, 240, 241, 1);
                    }
                    .text4{
                        .text1;
                        font-size: 28px;
                        font-weight: 100;
                        line-height: 28px;
                        color: RGBA(1, 245, 103, 1);
                    }
                }
            }
            .card-top-center{
                width: 36%;
                background-image: url(../images/system-infor-center.png);
                .card-top-center-title{
                    margin-left: 55px;
                    color: #d6ffff;
                    line-height: 9px;
                    font-size: 18px;
                }
                .card-top-center-body{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    .text1{
                        width: 23%;
                        height: 47px;
                        line-height: 53px;
                        text-align: center;
                        font-size: 14px;
                        color: RGBA(208, 248, 249, 1);
                        margin-left: 2%;
                    }
                    .text2{
                        .text1;
                        width: 24%;
                        margin-left: 0;
                    }
                    .text3{
                        .text1;
                        width: 24%;
                        margin-left: 0;
                    }
                    .text4{
                        .text1;
                        width: 25%;
                        margin-left: 0;
                    }
                    .text5{
                        .text1;
                        line-height: 28px;
                        font-size: 28px;
                        font-weight: 100;
                        color: RGBA(1, 240, 241, 1);
                    }
                    .text6{
                        .text1;
                        margin-left: 0;
                        width: 24%;
                        line-height: 28px;
                        font-size: 28px;
                        font-weight: 100;
                        color: RGBA(1, 245, 103, 1);
                    }
                    .text7{
                        .text1;
                        width: 24%;
                        margin-left: 0;
                        line-height: 28px;
                        font-size: 28px;
                        font-weight: 100;
                        color: RGBA(70, 106, 216, 1);
                    }
                    .text8{
                        .text1;
                        width: 25%;
                        margin-left: 0;
                        font-size: 28px;
                        font-weight: 100;
                        line-height: 28px;
                        color: RGBA(225, 192, 32, 1);
                    }
                }
            }
            .card-top-right{
                width: 27%;
                background-image: url(../images/system-infor-right.png);
                .card-top-right-title{
                    margin-left: 55px;
                    color: #d6ffff;
                    line-height: 9px;
                    font-size: 18px;
                }
                .card-top-right-body{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    .text1{
                        width: 31%;
                        height: 47px;
                        line-height: 53px;
                        text-align: center;
                        font-size: 14px;
                        color: RGBA(208, 248, 249, 1);
                        margin-left: 2%;
                    }
                    .text2{
                        .text1;
                        width: 33%;
                        margin-left: 0;
                    }
                    .text3{
                        .text1;
                        width: 32%;
                        margin-left: 0;
                    }
                    .text4{
                        .text1;
                        line-height: 28px;
                        font-size: 28px;
                        font-weight: 100;
                        color: RGBA(1, 240, 241, 1);
                    }
                    .text5{
                        .text1;
                        margin-left: 0;
                        width: 33%;
                        line-height: 28px;
                        font-size: 28px;
                        font-weight: 100;
                        color: RGBA(1, 245, 103, 1);
                    }
                    .text6{
                        .text1;
                        width: 32%;
                        margin-left: 0;
                        line-height: 28px;
                        font-size: 28px;
                        font-weight: 100;
                        color: RGBA(70, 106, 216, 1);
                    }
                }
            }
        }
        .card-bottom{
            width: 100%;
            height: 337px;
            margin-top: 20px;
            .charts{
                width: 1200px;
                height: 250px;
                margin-bottom: -71px;
            }
            .bottom-img{
                display: flex;
                justify-content: space-evenly;
            }
        }
    }
}

.sla-satisfaction{
    height: 24.6%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .sla {
        height: 100%;
        width: 48%;
        .charts{
            background-color: @cardColor;
            margin: 0 auto;
            width: 590px;
            height: 197px;
            background-image: url(../images/charts2.png);
            background-position: 133px 19px;
            background-repeat: no-repeat;
        }
        .total{
            color: RGBA(0, 255, 255, 1);
            top: -135px;
            left: 173px;
            position: relative;
            font-weight: 100;
            font-size: 43px;
            width: 96px;
            display: flex;
            justify-content: space-evenly;
        }
    }
    .satisfaction{
        .sla
    }
}

.admit-support{
    height: 33.3%;
    .card{
        width: 100%;
        height: 90.5%;
        background-color: @cardColor;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .card-left{
            width: 49%;
            height: 100%;
            .charts{
                margin: 0 auto;
                width: 600px;
                height:300px;
                margin-bottom: -72px;
            }
            .bottom-img{
                display: flex;
                justify-content: space-evenly;
                margin-left: 43px;
            }
        }
        .card-right{
            .card-left;
        }
    }
}

.capacity-infor{
    height: 60.5%;
    .card{
        width: 100%;
        height: 100%;
        background-color: @cardColor;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .card-top{
            height: 55%;
            width: 100%;
            .charts{
                margin: 0 auto;
                width: 1200px;
                height:310px;
            }
        }
        .card-left{
            width: 49%;
            height: 45%;
            .charts{
                margin: 0 auto;
                width: 540px;
                height:262px;
                margin-bottom: -240px;
            }
            .bottom-img{
                margin-left: 126px;
            }
        }
        .card-right{
            width: 49%;
            height: 45%;
            .charts{
                margin: 0 auto;
                width: 540px;
                height:262px;
            }
        }
    }
}

.pue-infor{
    height: 35%;
    margin-top: 65px;
    .card{
        height: 85.5%;
        display: flex;
        background-color: @cardColor;
        .left{
            width: 30%;
            height: 100%;
            .charts{
                margin: 0 auto;
                width: 220px;
                height: 316px;
            }
        }
        .right{
            width: 70%;
            height: 100%;
            .charts{
                margin: 0 auto;
                width: 860px;
                height: 316px;
            }
        }
    }
}

.modal{
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(102,102,102,0.8);
    .loading{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto;
        margin-top:20%;
        position: relative;
        border:5px solid lightgreen;
        -webkit-animation: turn 2s linear infinite;
        span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            -webkit-animation: changeBgColor 2s linear infinite;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes turn{
            0%{
                -webkit-transform: rotate(0deg);
                border-color: lightgreen;
            }
            100%{
                -webkit-transform: rotate(360deg);
                border-color: lightblue;
            }
        }
    }
}

